<style>
  .padding-small {
    padding: 0.75em 0;
  }
</style>
<template>
  <div class="align-center padding-small bg-color-white" :data-url="dataUrl" @click="gotoMyStatics()">
    <el-row type="flex" justify="center" align="middle">
      <el-col :span="5">
        <div>
          {{highlight.total}}
        </div>
        <div class="font-small color-silver margin-top-normal">总题数</div>
      </el-col>
      <el-col :span="1">
        <v-separator :height="'1em'" :width="'1px'" :customClass="'bg-color-silver'"></v-separator>
      </el-col>
      <el-col :span="5">
        <div class="color-extra-light-black">
          {{(highlight.rightRate * 100).toFixed(0)}}%
        </div>
        <div class="font-small color-silver margin-top-normal">正确率</div>
      </el-col>
      <el-col :span="1">
        <v-separator :height="'1em'" :width="'1px'" :customClass="'bg-color-silver'"></v-separator>
      </el-col>
      <el-col :span="5">
        <div class="color-extra-light-black">{{highlight.fans}}</div>
        <div class="font-small color-silver margin-top-normal">关注数</div>
      </el-col>
      <el-col :span="1">
        <v-separator :height="'1em'" :width="'1px'" :customClass="'bg-color-silver'"></v-separator>
      </el-col>
      <el-col :span="5">
        <div>
          <div class="color-extra-light-black">{{highlight.sigmaAge}}天</div>
          <div class="font-small color-silver margin-top-normal">Σ年龄</div>
        </div>
      </el-col>
      <el-col :span="1">
        <i class="fa fa-angle-right fa-2x align-right color-gray"></i>
      </el-col>
    </el-row>
  </div>
</template>
<script type="text/babel">
  import {FakerHighlight} from 'store/faker';

  export default {

    data(){
      return {
        rawData: FakerHighlight()[0]
      }
    },
    computed: {
      highlight(){
          let highlight = this.rawData;
          highlight.rightRate =highlight.totalRight===0?0:highlight.total/highlight.totalRight;
          return highlight;
      },
      dataUrl(){
        let url = this.$store.state.app.statUrl + "StudentStatData/getStudentHighlight?student="
          + this.$store.state.app.loginState.serverStudentId;
        this.fetchData(url);
        return url;
      }
    },
    methods: {
      gotoMyStatics(){
        alert('敬请期待更全面的数据分析！');
//        this.$router.push({name: '我的统计'});
      },
      fetchData(url){
        this.$http.get(url)
          .then((response) => {
            if (response.data.success) {
              this.rawData = response.data.obj;
            }
          });
      }
    },
    components: {}
  };
</script>
